<template>
	<div class="card mb-3" style="line-height: 1.2;">
		<div class="card-header d-flex align-items-center">
			规格项:
			<el-input class="ml-2" placeholder="选择规格" 
			size="mini" style="width: 200px;"
			:value="item.name"
			@input="vModel('name', index, $event)">
				<el-button slot="append" icon="el-icon-more"
				@click="chooseSkus"></el-button>
			</el-input>
			<el-radio-group class="ml-2" size="mini" 
			style="margin-bottom: -10px;"
			:value="item.type"
			@input="vModel('type', index, $event)">
				<el-radio style="margin-right: 10px;" :label="0">无</el-radio>
				<el-radio style="margin-right: 10px;" :label="1">颜色</el-radio>
				<el-radio style="margin-right: 10px;" :label="2">图片</el-radio>
			</el-radio-group>
			
			<!-- 上移 -->
			<el-button class="ml-auto" icon="el-icon-top" size="mini"
			@click="sortCard('moveUp',index)"
			:disabled="index === 0"></el-button>
			<el-button icon="el-icon-bottom" size="mini"
			@click="sortCard('moveDown',index)"
			:disabled="index === total - 1"></el-button>
			<el-button type="text" size="mini"
			@click="delSkuCardEvent">删除</el-button>
		</div>
		<div class="card-body">
			<!-- 规格属性列表 -->
			<div class="d-flex align-items-center flex-wrap">
				<sku-card-children :type="item.type"
				v-for="(child, cIndex) in item.list" :key="cIndex"
				:item="child" :index="cIndex"
				:cardIndex="index"
				v-dragging="{item: child, list: item.list, group:`skuItem${index}`}"></sku-card-children>
			</div>
		</div>
		<!-- 增加 -->
		<div class="mt-2">
			<el-button type="text" size="mini" icon="el-icon-plus"
			@click="addSkuValueEvent">增加规格属性</el-button>
		</div>
		<div class="m-2">
			<el-button :type="isEdit ? 'danger' : 'primary'" size="mini"
			@click="updateSkuCardEvent">{{this.isEdit ? '保存' : '已保存'}}</el-button>
		</div>
	</div>
</template>

<script>
	import {mapState, mapMutations} from "vuex";
	import skuCardChildren from "./sku-card-children.vue";
	
	let defaultValue = ['属性值', '#FFFFFF', '/favicon.ico']
	
	export default {
		//注入app
		inject:['app', 'layout'],
		
		props: {
			item: Object,
			index: Number,
			total: Number
		},
		
		components: {
			skuCardChildren,
		},
		
		data() {
			return {
				isEdit: true,
				list: []
			}
		},
		
		computed: {
			...mapState({
				sku_card: state => state.goodsCreate.sku_card
			})
		},
		
		methods: {
			...mapMutations([ 'delSkuCard', 'vModelSkuCard',
			'sortSkuCard', 'addSkuValue', 'sortSkuValue']),
			
			vModel(key, index, value) {
				this.isEdit = true
				this.vModelSkuCard({key, index, value})
			},
			
			addSkuValueEvent(value = false) {
				this.layout.showLoading()
				this.axios.post('/admin/goods_skus_card_value', {
					goods_skus_card_id: this.item.id,
					name: this.item.name,
					order: 50,
					value: typeof value === 'string' ? value : defaultValue[this.item.type],
				}, {token: true}).then(res => {
					let data = res.data.data
					data.text = this.item.type === 0 ? data.value : defaultValue[0]
					data.color = this.item.type === 1 ? data.value : defaultValue[1]
					data.image = this.item.type === 2 ? data.value : defaultValue[2]
					this.addSkuValue({
						index: this.index,
						data
					})
					this.layout.hideLoading()
				}).catch(err => {
					this.layout.hideLoading()
				})
			},
			
			//保存更新
			updateSkuCardEvent() {
				this.layout.showLoading()
				this.item['goodsSkusCardValue'] = this.item.list
				console.log('sku_card info', this.item)
				this.axios.post('/admin/goods_skus_card/' + this.item.id, this.item,
				{token: true}).then(res => {
					let data = res.data.data
					console.log(data)
					//this.delSkuCard(this.index)
					this.isEdit = false
					this.$message({
						message: '保存规格成功',
						type: 'success'
					});
					this.layout.hideLoading()
				}).catch(err => {
					this.layout.hideLoading()
				})
				
			},
			
			//delSkuCardEvent
			delSkuCardEvent() {
				this.layout.showLoading()
				this.axios.post('/admin/goods_skus_card/' + this.item.id + '/delete', {},
				{token: true}).then(res => {
					let data = res.data.data
					this.delSkuCard(this.index)
					this.$message({
						message: '删除一条规格成功',
						type: 'success'
					});
					this.layout.hideLoading()
				}).catch(err => {
					this.delSkuCard(this.index)
					this.layout.hideLoading()
				})
				
			},
			
			//排序规格卡片
			sortCard(action, index) {
				this.sortSkuCard({action, index})
				this.axios.post('/admin/goods_skus_card/sort',{
					sortdata: this.sku_card.map((v, index) => {
						return {
							id: v.id,
							order: index + 1
						}
					})
				}, {token: true})
			},
			
			//选择规格
			chooseSkus() {
				this.app.chooseSkus((res) => {
					this.vModel('name', this.index, res.name)
					this.vModel('type', this.index, res.type)
					// this.vModel('list', this.index, res.list)
					// this.list = res.list
					res.list.forEach(item => {
						this.addSkuValueEvent(item.name)
					})
				})
			}
		},
		
		mounted() {
			//监听拖拽结束
			this.$dragging.$on('dragend', (e) => {
				if (e.group === 'skuItem' + this.index) {
					this.sortSkuValue({index: this.index, value: this.list})
					this.axios.post('/admin/goods_skus_card_value/sort',{
						sortdata: this.list.map((item, index) => {
							return {
								id: item.id,
								order: index + 1
							}
						})
					}, {token: true})
				}
			})
			
			//监听传过来的item.list
			this.$watch('item.list', (newValue, oldValue) => {
				this.list = newValue
			})
			
		},
	}
</script>

<style>
</style>
